<template>
  <div class="carousel-page">
    <el-carousel
      :interval="5000"
      arrow="always"
      :height="pageW >= '1920' || pageW < 1360 ? '31vw' : '27vw'"
      v-if="list.length"
    >
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img :src="$store.state.baseUrl + item.carouselFile" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script >
export default {
  props: ["list"],
  data() {
    return {
      pageW: 1920,
    };
  },
  mounted() {
    this.pageW = window.screen.width;
    console.log(this.pageW);
  },
};
</script>
<style lang="less">
.carousel-page {
  .el-carousel__item {
    width: 100vw;
    @media screen and (max-width: 1920px) {
      img {
        width: 100%;
        height: 100%;
      }
    }

    @media screen and (max-width: 1440px) {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .el-carousel__arrow {
    &:hover {
      background-color: #0b4e9e;
    }
    width: 62px;
    height: 96px;
    border-radius: 0;
    i {
      font-size: 30px;
    }
  }
}
</style>